<template>
  <div class="three-container">
    <div class="controls-panel">
      <el-button @click="toggleRotation" :type="isRotating ? 'danger' : 'success'">
        {{ isRotating ? '停止旋转' : '开始旋转' }}
      </el-button>
      <el-button @click="resetCamera" type="primary">
        重置视角
      </el-button>
    </div>
    <div ref="container" class="three-canvas"></div>
  </div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  name: 'ThreeDModel',
  data() {
    return {
      isRotating: true
    };
  },
  mounted() {
    this.initThreeJS();
    window.addEventListener('resize', this.onWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onWindowResize);
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    if (this.renderer) {
      this.renderer.dispose();
    }
  },
  methods: {
    initThreeJS() {
      // 初始化场景
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xf0f0f0);

      // 初始化相机
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.camera.position.set(5, 5, 5);
      this.camera.lookAt(0, 0, 0);

      // 初始化渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.$refs.container.appendChild(this.renderer.domElement);

      // 添加控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.dampingFactor = 0.05;

      // 添加灯光
      this.addLights();

      // 创建长方体模型
      this.createBox();

      // 开始渲染循环
      this.animate();
    },

    addLights() {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
      this.scene.add(ambientLight);

      // 方向光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(5, 10, 7);
      this.scene.add(directionalLight);

      // 点光源
      const pointLight = new THREE.PointLight(0xff0000, 1, 100);
      pointLight.position.set(-5, 5, -5);
      this.scene.add(pointLight);
    },

    createBox() {
      // 创建长方体几何体 (2x3x1)
      const geometry = new THREE.BoxGeometry(2, 3, 1);
      
      // 创建材质
      const material = new THREE.MeshPhongMaterial({
        color: 0x00ff00,
        shininess: 100,
        specular: 0x111111
      });

      // 创建网格
      this.box = new THREE.Mesh(geometry, material);
      this.scene.add(this.box);

      // 添加网格辅助线
      const gridHelper = new THREE.GridHelper(10, 10);
      this.scene.add(gridHelper);

      const axesHelper = new THREE.AxesHelper(5);
      this.scene.add(axesHelper);
    },

    animate() {
      this.animationFrameId = requestAnimationFrame(this.animate);
      
      // 旋转长方体（仅在启用旋转时）
      if (this.box && this.isRotating) {
        this.box.rotation.x += 0.01;
        this.box.rotation.y += 0.01;
      }

      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    },

    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },

    toggleRotation() {
      this.isRotating = !this.isRotating;
    },

    resetCamera() {
      this.camera.position.set(5, 5, 5);
      this.camera.lookAt(0, 0, 0);
      this.controls.reset();
    }
  }
};
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.three-canvas {
  width: 100%;
  height: 100%;
}

.controls-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}
</style>
